<template>
  <div class="MainPage bg-white w-full h-[100vh] p-2 flex-col ">
    <div class="headerLine w-full h-[5%] ">
      <a-button size="large" class="headerLineBtn" @click="openDirectory">打开文件夹</a-button>
      <a-button size="large" type="primary" class="headerLineBtn">鼻</a-button>
      <a-button size="large" type="primary" class="headerLineBtn">耳</a-button>
      <a-button size="large" type="primary" class="headerLineBtn">喉</a-button>
    </div>

    <div class="content w-full flex gap-1 mt-1">
      <div class="imageArea w-[60%] ">
        <div class="floatButton">
          <a-button @click="preImage">上一个</a-button>
          <a-button @click="nextImage">下一个</a-button>
          <a-button @click="handleReset">复位</a-button>
        </div>
<!--        图片区域-->
        <Image class="Image" :image-src="currentImagePath" :resetScale="resetScale"></Image>
        <div class="judge">
          <span style="color: black">临床诊断：</span>
          <a-textarea :auto-size="{ minRows: 6, maxRows: 6 }"
                      v-model:value="judgeText" placeholder="请输入临床诊断"/>
        </div>
        <div class="description">
          <span style="color: black">临床描述：</span>
          <a-textarea :auto-size="{ minRows: 6, maxRows: 6 }"
                      v-model:value="description" placeholder="请输入临床诊断"/>
        </div>
      </div>
      <div class="optionsArea w-[40%] grid">
        <div class="options">
          <a-typography-title :level="2" style="color: black;">正常：</a-typography-title>
          <div class="normalOptions">
            <a-button size="large" v-for="(item,index) in normalFeatures" :key="index"
                      :danger="formButton[item]"
                      @click="addFeatureToForm($event,item)"
            >{{ item }}
            </a-button>
            <a-button size="large" @click="showAddModal('正常')">+</a-button>
          </div>
        </div>
        <div class="options">
          <a-typography-title :level="2" style="color: black">鼻炎：</a-typography-title>
          <div class="noseFeaturesOptions">
            <a-button size="large" v-for="(item,index) in noseFeatures" :key="index"
                      :danger="formButton[item]"
                      @click="addFeatureToForm($event,item)"
            >{{ item }}
            </a-button>
            <a-button size="large" @click="showAddModal('鼻炎')">+</a-button>
          </div>
        </div>
        <div class="options">
          <a-typography-title :level="2" style="color: black">其他：</a-typography-title>
          <div class="otherOptions">
            <a-button size="large" v-for="(item,index) in otherFeatures" :key="index"
                      :danger="formButton[item]"
                      @click="addFeatureToForm($event,item)"
            >{{ item }}
            </a-button>
            <a-button size="large" @click="showAddModal('其他')">+</a-button>
          </div>
        </div>
      </div>
    </div>
    <AddModal :title="addTitle" ref="addModal" @ok="addFeature"></AddModal>

  </div>
</template>

<script setup>
import Image from "./Image.vue";
import {onMounted, ref} from "vue";
import AddModal from "./AddModal.vue";

const fileList = ref([]);
const currentImagePath = ref('')

const openDirectory = () => {
  window.electronAPI.getDirectory().then((res) => {
    fileList.value = res
    // 设置第一张图片
    currentImagePath.value = fileList.value[0]
  });
}

const preImage = () => {
  // 获取当前图片的下标
  let index = fileList.value.indexOf(currentImagePath.value)
  if (index > 0) {
    currentImagePath.value = fileList.value[index - 1]
  }
}
const nextImage = () => {
  // 获取当前图片的下标
  let index = fileList.value.indexOf(currentImagePath.value)
  if (index < fileList.value.length - 1) {
    currentImagePath.value = fileList.value[index + 1]
  }
}
const resetScale = ref(false)
const handleReset = () => {
  resetScale.value = !resetScale.value
}


const addModal = ref(null)
const addTitle = ref("")
const showAddModal = (name) => {
  addTitle.value = name
  addModal.value.open = true
}


const judgeText = ref("");
const description = ref("");
const normalFeatures = ref([]);
const noseFeatures = ref([]);
const otherFeatures = ref([]);
const getFeature = () => {
  window.electronAPI.getFeatures().then((res) => {
    normalFeatures.value = res.normal
    noseFeatures.value = res.noseFeatures
    otherFeatures.value = res.other
    let tempArr = [...res.normal, ...res.noseFeatures, ...res.other]
    for (let i = 0; i < tempArr.length; i++) {
      formButton.value[tempArr[i]] = false
    }
  })
}
const addFeature = (param) => {
  window.electronAPI.addFeature(param)
  getFeature()
}
const formButton = ref({})
const addFeatureToForm = (e, item) => {
  formButton.value[item] = !formButton.value[item]
}
onMounted(() => {
  getFeature()
})
</script>

<style scoped>
:root {
  --first-height: 100vh
}

.MainPage {
  background-color: #ebedf5;
  overflow: hidden;
}

.headerLine {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 50px;
  max-height: 50px;
  /*background-color: #f5f6fa;*/
}

.headerLineBtn {
  width: 120px;
}

.content {
  height: calc(100vh - 50px - 2rem);
  margin-top: 1rem;
  background-color: #f5f6fa;
}

.floatButton {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100px;
  z-index: 99;
}

.imageArea {
  display: grid;
  grid-template-areas:
            "Image"
            "judge"
            "description";
  min-width: 840px;
}

.Image {
  height: 100%;
  width: 100%;
  margin: auto;
  min-width: 840px;
  min-height: 444px;
}

.optionsArea {
  grid-template-rows: 1fr 2fr 3fr;
  height: 100%;
  min-width: 550px;
  min-height: 780px;
}

.options {
  height: 30%;

}

.normalOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 5px;
}

.noseFeaturesOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 5px;
}

.otherOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 5px;
}

.options:nth-child(1) {
  height: 25%;
  /*background-color: lightcoral;*/
}

.options:nth-child(2) {
  height: 35%;
  /*background-color: lightgreen;*/
}

.options:nth-child(3) {
  height: 30%;
  /*background-color: lightskyblue;*/
}

.border {
  border: 4px solid #000;
}

.avatar-uploader > .ant-upload {
  width: 28px;
  height: 28px;
}
</style>
